<template>
  <div class="profession_container">
    <div class="container">
      <h2 class="home_item_title"><span>支持你成为专业人才</span><b>POPULAR  TALENT</b></h2>
      <ul class="profession_list">
        <li  v-for="(item,index) in List"
          :key="index"
          class="list_item">
          <p><img :src="item.picUrl" :alt="item.talentName"/></p>
          <h2>{{item.talentName}}</h2>
        </li>
      </ul>
    </div>
  </div>
</template>
<!--suppress JSAnnotator -->
<script>
  /* eslint-disable quotes */

  export default {
    name: 'HomeProfessional',
    props: {
      List: Array
    }
  }
</script>
<style lang="stylus" scoped>
  .profession_container {
    padding: 100px 0 262px;
    background-color #f9f9f9
  }
  .profession_list {
    margin-top 50px;
    overflow hidden
    .list_item {
      float left;
      margin-left :37.333333333333336px;
      width: 252px;
      background-color: #fff;
      overflow hidden
      border-radius 6px;
      &:first-child {
        margin-left 0
      }
      p {
        width 100%
        height:190px;
        background-color: #d3d3d3;
        overflow hidden
        img {
          width 100%
          height auto;
          transition all .3s;
        }
          &:hover{
            img{
              transform: scale(1.1)
            }
          }
      }
      h2 {
        font-size: 16px;
        line-height 40px;
        text-align center
        color: #000000;

        opacity: 0.9;
      }
    }
  }
</style>
